<template>
	<div class="bussinessIntro">
		<!-- banner -->
		<div class="banner">
			<div class="bannerContent clearfix w1024">
				<div class="fl detail">
					<h3 class="tit">挂机短信</h3>
					<p class="content">
						客户的手机号或固话办理挂机短信，用户拨打客户电话时，在挂断电话后，用户将收到一条客户事先编辑好的文字短信或图文短信。<br />内容可展示：品牌宣传、客户关怀等，提升企业品牌价值，增加销售机会。
					</p>
				</div>
				<div class="fr mt10">
					<img src="../../assets/images/hangupMessage/img01.svg" alt="" />
				</div>
			</div>
		</div>
		<!-- 效果展示 -->
		<div class="effectPrompt">
			<div class="effectPromptContent w1024">
				<h2 class="zhTit">
          <span class="leftline"></span>
          效果展示
          <span class="rightline"></span>
        </h2>
				<h3 class="enTit">EFFECT DISPLAY</h3>

				<div class="detail clearfix">
					<div class="fl">
						<img src="../../assets/images/hangupMessage/img02.svg" alt="" />
						<p class="bottomTit">文字短信</p>
					</div>
					<div class="fr">
            <img src="../../assets/images/hangupMessage/img03.svg" alt="" />
            <p class="bottomTit">图文短信</p>
          </div>
				</div>
			</div>
		</div>
		<!-- 产品特点 -->
		<div class="features">
			<div class="featuresContent w1024">
				<h2 class="zhTit">
          <span class="leftline"></span>
          产品特点
          <span class="rightline"></span>
        </h2>
				<h3 class="enTit">PRODUCT FEATURES</h3>

				<div class="list clearfix">
					<ul>
						<li v-for="(item,index) in featuresList" :key="index">
							<div class="items">
								<p class="typeTit">{{ item.title }}</p>
							</div>
							<div class="typeCon">
								<p class="mb5" v-for="items in item.content" :key="items">
									{{ items }}
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 目标行业 -->
		<div class="targetIndustry">
			<div class="targetIndustryContent w1024">
				<h2 class="zhTit">
          <span class="leftline"></span>
          目标行业
          <span class="rightline"></span>
        </h2>
				<h3 class="enTit">PRODUCT FEATURES</h3>
				<div class="listWraop">
					<ul>
						<li v-for="item in targetIndustryList" :key="item.itemsId">
							<div class="topIcon">
								<img :src="item.pic" alt="" />
							</div>
							<h3 class="middleTit">{{ item.title }}</h3>
							<div class="bottomList clearfix">
								<div class="items" v-for="items in item.content" :key="items">
									<i class="icon"></i>
									<p class="con">{{ items }}</p>
								</div>

								<!-- <template v-else>
                  
                  <div class="items ml20">
                    <i class="icon"></i>
                    <p class="con">事业单位</p>
                  </div>
                  <div class="" style="display: inline-block">
                    <div class="items ml5">
                      <i class="icon"></i>
                      <p class="con">医院</p>
                    </div>
                    <div class="items">
                      <i class="icon"></i>
                      <p class="con">社区服务</p>
                    </div>
                  </div>
                </template>
                <div>

                </div> -->

								<!-- <div class="items">
                  <i class="icon"></i>
                  <p class="con">开锁</p>
                </div>
                <div class="items">
                  <i class="icon"></i>
                  <p class="con">搬家</p>
                </div>
                <div class="items">
                  <i class="icon"></i>
                  <p class="con">家政</p>
                </div> -->
							</div>
						</li>
						<li>
							<div class="topIcon">
								<img src="../../assets/images/hangupMessage/icon05.svg" alt="" />
							</div>
							<h3 class="middleTit">政企公用</h3>
							<div class="bottomList clearfix">
								<div class="items ml20">
									<i class="icon"></i>
									<p class="con">事业单位</p>
								</div>
								<div class="" style="display: inline-block">
									<div class="items ml5">
										<i class="icon"></i>
										<p class="con">医院</p>
									</div>
									<div class="items">
										<i class="icon"></i>
										<p class="con">社区服务</p>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 支付方式 -->
		<div class="paymentMethod">
			<div class="paymentMethodContent w1024">
				<h2 class="zhTit">
          <span class="leftline"></span>
          支付方式
          <span class="rightline"></span>
        </h2>
				<h3 class="enTit">TWO PAYMENT METHODS ARE SUPPORTED</h3>
				<h3 class="tips mt10">（2选1）</h3>
				<div class="tableWrap clearfix">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column prop="type" label="支付方式" width="170">
						</el-table-column>
						<el-table-column prop="name" label="运营商" width="280">
						</el-table-column>
						<el-table-column prop="content" label="核心价值">
							<template slot-scope="scope">
								<p v-if="scope.row.content == 0">
									用户订购挂短后，由运营商每月通过手机号码进行扣费
								</p>
								<div v-else>
									<p class="mt20">增加回报：产品优惠比例高，渠道收入空间大</p>
									<p class="mt20">
										方便缴费：统一订购、支付费用，员工无需自行付费
									</p>
									<p class="mt20">简化流程：简化订购手续，提高业务订购效率</p>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<el-dialog title="公告" top="20vh" @close="closeNotice" :visible.sync="noticeVisible" width="700px" center>
			<ul class="newslist" style="height: 400px;overflow-y: auto;">
				<li v-for="(item,index) in list">
					<div class="titbox">
						<div class="flex flex-align-center"><i class="iconfont icon-gonggao"></i>
							<div class="tt" style="margin-left:10px;">{{item.title}}</div>
							<span class="new-flag"></span>
						</div>
						<div class="righ"><span class="date">{{item.send_time}}</span></div>
					</div>
					<div class="ccont">
						<div class="lef allshow">
							<div class="ggcont">
								<p><span style="font-weight: bold;margin-right: 8px;">公告内容：</span></p>
								<div class="notice-content" :class="item.open?'open':''" v-html="item.content"></div>
							</div>
						</div>
						<div class="righ">
							<div class="sport" @click="item.open=!item.open" v-if="!item.open" style="color: rgb(243, 152, 0);">
								<span class="tex">展开</span><i class="el-icon-caret-bottom"></i>
							</div>
							<div class="sport" @click="item.open=!item.open" v-else style="color: rgb(243, 152, 0);">
								<span class="tex">收起</span><i class="el-icon-caret-top"></i>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="goNoticeList">查看更多公告</el-button>
			    <el-button type="primary" @click="closeNotice">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import pic1 from "@/assets/images/hangupMessage/icon01.svg";
	import pic2 from "@/assets/images/hangupMessage/icon02.svg";
	import pic3 from "@/assets/images/hangupMessage/icon03.svg";
	import pic4 from "@/assets/images/hangupMessage/icon04.svg";
	import pic5 from "@/assets/images/hangupMessage/icon05.svg";
	export default {
		name: "BussinessIntro",
		components: {},
		props: {},
		data() {
			return {
				noticeVisible: false,
				list: [],
				featuresList: [{
						title: "有效宣传",
						content: ["提升企业形象，实现", "客户广告信息的精准投放"],
					},
					{
						title: "时效性强",
						content: ["实现即时发送短信内容"],
					},
					{
						title: "控制成本",
						content: ["包月套餐", "实现高效率营销策略"],
					},
					{
						title: "用户感知好",
						content: ["用户挂机及时收到", "企业信息，避免用户投诉"],
					},
				],
				targetIndustryList: [{
						itemsId: 1,
						pic: pic1,
						title: "生活服务",
						content: ["招聘", "开锁", "搬家", "家政"],
					},
					{
						itemsId: 2,
						pic: pic2,
						title: "交通运输",
						content: ["货运", "快递", "驾校", "4S店"],
					},
					{
						itemsId: 3,
						pic: pic3,
						title: "票务旅游",
						content: ["航空", "铁路", "演出", "旅游社"],
					},
					{
						itemsId: 4,
						pic: pic4,
						title: "地产零售",
						content: ["中介", "售楼处", "百货", "超市"],
					},
				],
				tableData: [
					      {
					        type: "个付",
					        name: "电信、联通",
					        content: 0,
					      },
					{
						type: "统付",
						name: "移动、电信、联通",
						content: 1,
					},
				],
			};
		},
		created() {},
		mounted() {
			//this.showNoticeDialog()
		},
		computed: {},
		watch: {},
		methods: {
			closeNotice() {
				this.noticeVisible = false
			},
			showNoticeDialog() {
				this.$request.queryNoticeDialog({
					pagenow: 1,
					shownum: 10000,
					producttypeid: 23,
					noticetype: 2,
				}).then(res => {
					if(res.code == 0) {
						var list = res.list
						list.forEach(item => {
							item.open = false
						})
						this.list = list
						if(list.length) {
							this.noticeVisible = true
						}
					} else {

					}
				})
			},
			goNoticeList() {
				this.noticeVisible = false
				this.$router.push('/notice')
			},
			closeNotice() {
				var ids = []
				this.list.forEach(item => {
					ids.push(item.businessnotice_id)
				})
				this.$request.closeNotice({
					noticeids: ids.join(',')
				}).then(res => {
					this.noticeVisible = false
					this.$store.commit('setMessageType','')
					this.$store.commit('setMessageProduct','')
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	@import "@/assets/styles/public/reset.scss";
	@import "@/assets/styles/hangupMessage/bussinessIntro.scss";
</style>